<template>
  <div id="Mypage">
    <div class="container">
        <div class="header">
            <span class="bobafont bobamusic-prev" @click="$router.back(-1)"></span>
        </div>
        <div class="headermessage" v-for="(item,index) in mymessage" :key="index">
            <div class="mypicture">
                <img :src="item.url" width="100%" height="100%">
            </div>
            <div class="myname"><p>{{item.name}}</p></div>
        </div>
        <div class="myinformation" v-for="(item,index) in myinformation" :key="index">
            <div class="headinformation">基本信息</div>
            <div class="detailedinformation">
                <p>注册时间: {{item.material}}</p>
                <p>性别: {{item.sex}}</p>
                <p>年龄: {{item.age}}</p>
                <p>地区: {{item.region}}</p>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { TopPlayList } from "network/api/RecommendApi";
export default {
  data() {
    return {
      mymessage:[
          {url:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3041701001,1968583786&fm=11&gp=0.jpg",name:"用户名称"}
      ],
      myinformation:[
          {material:"2018年12月注册",sex:"男",age:"18岁",region:"江苏省 苏州市"}
      ]
    };
  },
  methods: {
    
  },
}
</script>

<style>
#Mypage .container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #e5faf8;
  z-index: 2;
}
#Mypage .container .header {
  width: 100%;
  height: 40%;
  background: #acf6ef;
  display: flex;
  background-image: url("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2523829059,2058829098&fm=15&gp=0.jpg");
}
#Mypage .container .header .bobafont {
  color: #fff;
  font-size: 27px;
  line-height: 50px;
  margin-left: 10px;
}
#Mypage .container .headermessage{
    width: 90%;
    height: 30%;
    /* background: violet; */
    margin: 0 auto;
    margin-top: -90px;
    display: flex;
    flex-direction: column;
}
#Mypage .container .headermessage .mypicture{
    width: 24%;
    height: 40%;
    /* background: yellow; */
    margin: 0 auto;
    border-radius: 50%;
    z-index: 3;
    border: 3px solid #fff;
}
#Mypage .container .headermessage .mypicture img{
    border-radius: 50%;
}
#Mypage .container .headermessage .myname{
    width: 100%;
    height: 60%;
    background: #acf6ef;
    margin-top: -35px;
    border-radius: 10px;
    display: flex;
}
#Mypage .container .headermessage .myname p{
    margin: 0 auto;
    line-height: 130px;
    font-size: 23px;
    color: #2ae0c8;
    font-weight: bold;
}
#Mypage .container .myinformation{
    width: 90%;
    height: 40%;
    background: #acf6ef;
    margin: 0 auto;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}
#Mypage .container .myinformation .headinformation{
    width: 25%;
    height: 20%;
    /* background: cornsilk; */
    margin: 0 auto;
    font-size: 20px;
    color: #2ae0c8;
    font-weight: bold;
    line-height: 53px;
}
#Mypage .container .myinformation .detailedinformation{
    width: 90%;
    height: 70%;
    /* background: darksalmon; */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
#Mypage .container .myinformation .detailedinformation p{
    color:#fff;
    opacity: 0.8;
}
</style>